<template>
  <van-row>
    <van-nav-bar
      :title="title"
      left-arrow
      @click-left="$emit('close')"
    />
    <van-form @submit="doSubmit">
      <van-field
        v-model="submitForm.moldName"
        readonly
        clickable
        name="picker"
        label="模具"
        placeholder="点击选择模具"
        input-align="left"
        :rules="[{ required: true, message: '请选择模具' }]"
        @click="showMold = true"
      />
      <van-field
        v-model="submitForm.productName"
        name="产品名称"
        label="产品名称"
        placeholder="(必填)产品名称"
        :rules="[{ required: true, message: '请填写产品名称' }]"
        input-align="left"
      />
      <van-field
        v-model="submitForm.categoryName"
        readonly
        clickable
        name="picker"
        label="分类"
        placeholder="点击选择分类"
        input-align="left"
        :rules="[{ required: true, message: '请选择分类' }]"
        @click="showCategoryPicker = true"
      />
      <van-field
        v-model="submitForm.unit"
        readonly
        clickable
        name="picker"
        label="单位"
        placeholder="点击选择单位"
        input-align="left"
        :rules="[{ required: true, message: '请选择单位' }]"
        @click="showUnitPicker = true"
      />
      <van-field
        v-model="submitForm.unitPrice"
        name="单价"
        label="单价"
        placeholder="(必填)单价"
        type="number"
        :rules="[{ validator: checkNumberGreaterThanZero, message: '请填写正确的单价' }]"
        input-align="left"
      />
      <van-field
        v-model="submitForm.color"
        name="颜色"
        label="颜色"
        placeholder="(必填)颜色"
        :rules="[{ required: true, message: '请填写颜色' }]"
        input-align="left"
      />
      <van-field
        v-model="submitForm.material"
        name="材质"
        label="材质"
        placeholder="(必填)材质"
        :rules="[{ required: true, message: '请填写材质' }]"
        input-align="left"
      />
      <van-field
        v-model="submitForm.size"
        name="尺码"
        label="尺码"
        placeholder="(必填)尺码"
        :rules="[{ required: true, message: '请填写尺码' }]"
        input-align="left"
      />
      <van-field
        v-model="submitForm.length"
        name="长度"
        label="长度"
        placeholder="(必填)长度"
        :rules="[{ required: true, message: '请填写长度' }]"
        input-align="left"
      />
      <van-field
        v-model="submitForm.weight"
        name="重量"
        label="重量(克)"
        type="digit"
        placeholder="(非必填)重量"
        input-align="left"
      />
      <van-field
        v-model="submitForm.stock"
        name="库存"
        label="库存"
        type="digit"
        placeholder="(必填)库存数量"
        :rules="[{ required: true, message: '请填写库存数量' }]"
        input-align="left"
      />
      <div style="margin: 16px;">
        <van-button round block type="danger" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <div v-if="showMold">
      <select-mold ref="selectMold" :visible="showMold" @close="handleCloseMold" />
    </div>
    <div v-if="showAttribute">
      <select-attribute ref="selectAttribute" :visible="showAttribute" @close="handleCloseAttribute" />
    </div>
  </van-row>
</template>
<script>
import { updateProductById, selectProductById, saveProduct } from '@/api/product'
import { selectCategoryTree } from '@/api/category'
import { selectByDictKey } from '@/api/dict'
import SelectMold from '@/components/modules/selectMold.vue'
import selectAttribute from '@/components/modules/selectAttribute.vue'

export default {
  name: 'ProductSubmitModule',
  components: { selectAttribute, SelectMold },
  data() {
    return {
      showMold: false,
      showAttribute: false,
      showUnitPicker: false,
      showCategoryPicker: false,
      categoryData: [],
      unitData: [],
      title: '',
      submitForm: {}
    }
  },
  methods: {
    init(id) {
      this.resetForm()
      this.getCategoryData()
      this.getUnit()
      this.title = '修改产品'
      if (!id) {
        this.title = '新增产品'
        return
      }
      selectProductById(id).then(resp => {
        if (resp.success) {
          this.submitForm = resp.data
        }
      })
    },
    resetForm() {
      this.submitForm = {
        moldName: '',
        productName: '',
        categoryName: '',
        unit: '',
        unitPrice: '',
        color: '',
        material: '',
        size: '',
        length: '',
        weight: '',
        stock: ''
      }
    },
    doSubmit() {
      let request = saveProduct
      if (this.submitForm.id) {
        request = updateProductById
      }
      request(this.submitForm).then(resp => {
        if (resp.success) {
          this.$toast.success('操作成功')
          this.$emit('close')
        }
      })
    },
    onCategoryConfirm(row) {
      this.submitForm.categoryId = row.id
      this.submitForm.categoryName = row.categoryName
      this.showCategoryPicker = false
    },
    onUnitConfirm(row) {
      this.submitForm.unit = row.itemName
      this.showUnitPicker = false
    },
    getCategoryData() {
      selectCategoryTree({}).then(resp => {
        if (resp.success) {
          this.categoryData = resp.data
        }
      })
    },
    getUnit() {
      selectByDictKey('prod_unit').then(resp => {
        if (resp.success) {
          this.unitData = resp.data
        }
      })
    },
    handleCloseMold(row) {
      this.showMold = false
      if (row) {
        this.submitForm.moldId = row.id
        this.submitForm.moldName = row.moldName
        this.submitForm.categoryId = row.categoryId
        this.submitForm.categoryName = row.categoryName
        this.submitForm.unit = row.unit
        this.submitForm.weight = row.weight
        this.showAttribute = true
        this.$nextTick(() => {
          this.$refs.selectAttribute.init(row)
        })
      }
    },
    handleCloseAttribute(row) {
      this.showAttribute = false
      if (row) {
        this.submitForm.productName = this.submitForm.moldName + '*' + row.color + '*' + row.material + '*' + row.size
        this.submitForm.color = row.color
        this.submitForm.material = row.material
        this.submitForm.size = row.size
        this.submitForm.length = row.length
        this.submitForm.unitPrice = row.unitPrice
        this.submitForm.stock = row.quantity
      }
    },
    checkNumberGreaterThanZero(value) {
      return value > 0
    }
  }
}
</script>

<style scoped>

</style>
